<template>
  <div
    class="address-management"
  >
    <el-editable
      class="table-list"
      :data="addressList"
      v-loading="tableLoading||deleteLoading"
      :columns="addressListColumns"
      @selection-change="handleSelectionChange"
    >
      <template
        slot="default-action"
        slot-scope="scope">
        <el-button
          size="small"
          @click.stop="handleEditAddressItem(scope)"
          type="text text-primary">修改</el-button>
        <el-button
          size="small"
          @click.stop="deleteAddressItem(scope)"
          type="text text-danger">删除</el-button>
      </template>
    </el-editable>
    <div class="page-box">
      <el-pagination
        align="right"
        class="pagination"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="curPage"
        :page-sizes="PAGE_NUMBER"
        :page-size="pageSize"
        :layout="PAGINATION_LAYOUT"
        :total="totalElements"
      />
    </div>
    <add-address-dialog
      :dialog-visible.sync="addressDialogShow"
      :form-data="currentAddress"
      :loading="submitLoading"
      @confirmDialog="handleSubmitAddress"
      @closeDialog="handleCancelSubmit"
    />

  </div>
</template>
<script>
import { PAGE_NUMBER, PAGINATION_LAYOUT } from '@const/common.js'
import ElEditable from '@components/el-editable/index.vue'
import AddAddressDialog from '@/moduleComponents/beforeSettle/distributorSide/basicInfoManagement/addAddressDialog'
import { addressListColumns } from './const'
import {
  addressList,
  addressDetail,
  createAddress,
  editAddress,
  deleteAddress
} from '@const/beforeSettleApi'

// const addressList = `/guoke-deepexi-storage-center/api/v1/storage/address/queryBsAddressAll`
// const addressDetail = `/guoke-deepexi-storage-center/api/v1/storage/address/getByBsAddress`
// const createAddress = `/guoke-deepexi-storage-center/api/v1/storage/address/savaBsAddress`
// const editAddress = `/guoke-deepexi-storage-center/api/v1/storage/address/updateBsAddress`
// const deleteAddress = `/guoke-deepexi-storage-center/api/v1/storage/address/deleteBsAddress`

export default {
  components: {
    ElEditable, AddAddressDialog
  },
  data () {
    return {
      addressListColumns,
      tableLoading: false,
      submitLoading: false,
      deleteLoading: false,
      addressList: [],
      addressDialogShow: false,
      isEdit: false, // 判断当前是新建地址还是编辑地址，用于确定发送的接口请求
      currentAddress: {}, // 编辑地址时需要传递进弹窗的当前地址数据，要注意接口返回的数据格式和form中的格式差异处理
      curPage: 1,
      PAGE_NUMBER,
      PAGINATION_LAYOUT,
      pageSize: PAGE_NUMBER[0],
      totalElements: 0
    }
  },
  mounted () {
    this.initNavButtons()
    this.getAddressList()
  },
  methods: {
    initNavButtons () {
      let obj = {
        type: 'btn',
        arr: [
          { type: 'primary', val: '+ 新增收货地址', handle: this.handleCreateAddressItem }
        ]
      }
      this.$store.commit('changeLayoutHandle', obj)
    },
    // 初始化列表
    getAddressList () {
      this.tableLoading = true
      const postData = {
        page: this.curPage,
        pageSize: this.pageSize,
        yp: 1 // 1医院端2配送商端
      }
      this.$axios.$post(addressList, postData)
        .then(res => {
          console.log(1)
          this.addressList = res.payload.content
          this.totalElements = res.payload.totalElements
        })
        .catch(e => {})
        .finally(() => {
          this.tableLoading = false
        })
    },
    handleSelectionChange () {},
    handleCurrentChange (page) {
      this.curPage = page
    },
    handleSizeChange (size) {
      this.pageSize = size
    },
    // 点击新增显示弹框
    handleCreateAddressItem () {
      this.isEdit = false
      this.currentAddress = {}
      this.addressDialogShow = true
    },
    handleEditAddressItem (scope) {
      this.isEdit = true
      this.currentAddress = scope.row
      this.addressDialogShow = true
    },
    // 删除时执行
    deleteAddressItem (scope) {
      const id = scope.row.id
      this.deleteLoading = true
      this.$axios.$post(deleteAddress + `?id=${id}`)
        .then(res => {
          if (Number(res.code) === 0) {
            this.$message.success('操作成功')
          }
        })
        .catch(e => {})
        .finally(() => {
          this.deleteLoading = false
          this.getAddressList()
        })
    },
    // 点击关闭按钮
    handleCancelSubmit () {
      this.currentAddress = {}
      this.addressDialogShow = false
    },
    // 点击提交按钮执行
    handleSubmitAddress (data) {
      if (this.isEdit) {
        const postData = {
          ...data,
          yp: 1, // 1医院2配送商
          id: this.currentAddress.id
        }
        // 编辑地址、刷新列表
        this.submitLoading = true
        this.$axios.$post(editAddress, postData)
          .then(res => {
            if (Number(res.code) === 0) {
              this.$message.success('操作成功')
              this.addressDialogShow = false
            }
          })
          .catch(e => {})
          .finally(() => {
            this.submitLoading = false
            this.getAddressList()
          })
      } else {
        const postData = {
          ...data,
          yp: 1 // 1医院2配送商
        }
        // 创建地址、刷新列表
        this.submitLoading = true
        this.$axios.$post(createAddress, postData)
          .then(res => {
            if (Number(res.code) === 0) {
              this.$message.success('操作成功')
              this.addressDialogShow = false
            }
          })
          .catch(e => {})
          .finally(() => {
            this.submitLoading = false
            this.getAddressList()
          })
      }
    }
  }
}
</script>
<style lang="less">

.address-management {
  height: 100%;
  overflow: auto;
  position: relative;

  .page-box {
    position: absolute;
    bottom: 0;
    width: 100%;
  }
}

</style>
